<template>
	<view>
		<view class="header-title">
			<view class="title">1.第一行为题目，中间不要换行，可以不加题号。</view>
			<view class="title">2.第二行开始为选项，选项与选项之间不要空行。</view>
			<view class="title">3.选项结束后，增加一个空行表示问题的结束。 </view>
			<view class="title">4.如果是填空题，之间空一行.</view>
		</view>
		<view class="header-content flex">
			<view class="bts" @tap="test">示例文本</view>
			<view class="bts" @tap="del">清空</view>
		</view>
		<view class="textareacss" :style="{height:aheight+'px'}">
			<textarea :value="formatContent" @input="getValue"></textarea>
		</view>
		<view class="buttoncss flex">
			<button>取消</button>
			<button class="bts-other" @tap="lookText">预览</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aheight: "",
				wenid: '',
				content: ''
			};
		},
		computed: {
			formatContent: {
				get() {
					return this.$store.state.wenJuanText || this.content
				},
				set(val) {
					return val
				}
			}
		},
		methods: {
			test() {
				this.content =
					'大学生情况调查\n\n1.题目1\n选项1\n选项2\n选项3\n\n2.题目2[多选题]\n选项4\n选项5\n选项6\n\n3.单行文本题\n\n4.文本题\n\n5.题目[多选题]\n选项4\n选项5'
			},
			del() {
				this.content = ''
				this.$store.commit('setWenJuanText', this.content)
			},
			getValue(e) {
				this.content = e.detail.value
			},
			//预览
			lookText() {
				if (this.content != "") {
					this.$store.commit('setWenJuanText', this.content)
					uni.navigateTo({
						url: '../textLook/textLook?&wenid' + this.wenid
					})
				} else {
					uni.showToast({
						title: "文本框内容不能为空",
						icon: 'none'
					})
				}
			},
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			let that = this
			this.wenid = options.wenid
			uni.getSystemInfo({
				success(res) {
					that.aheight = res.windowHeight * 0.6
				}
			})
		}
	}
</script>

<style lang="scss">
	.header-title {
		width: 690rpx;
		margin: 20rpx auto;

		.title {
			line-height: 50rpx;
			color: #333;
			font-size: 30rpx;
		}
	}

	.header-content {
		width: 690rpx;
		margin: 20rpx auto;

		.bts {
			line-height: 50rpx;
			color: #209FFC;
			font-size: 30rpx;
			margin-right: 100rpx;
		}
	}

	.textareacss {
		width: 690rpx;
		margin: 0 auto;

		textarea {
			border: 1rpx solid #DFDFDF;
			border-radius: 20rpx;
			width: 100%;
			height: 100%;
			padding: 20rpx 0 0 20rpx;
			box-sizing: border-box;
		}

	}

	.buttoncss {
		width: 690rpx;
		margin: 100rpx auto 20rpx;
		justify-content: space-between;

		button {
			width: 330rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
			text-align: center;
			color: #209FFC;
			background: #fff;
			border: 1rpx solid #209FFC;
		}

		.bts-other {
			background: #209FFC;
			color: #fff;
			border: none;
		}
	}
</style>
